<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="UTF-8">
	<title>首页</title>

	<link rel="stylesheet" type="text/css" href="/static/css/resources/bootstrap.min.css"/>
	<link rel="stylesheet" type="text/css" href="/static/css/stylesheets/index.css"/>
	<script type="text/javascript" src="/static/js/resources/jquery.min.js"></script>
	<script src="/static/js/resources/bootstrap.min.js"></script>
	<script src="/static/js/resources/bootstrapValidator.js"></script>
	<script type="text/javascript" src="/resources/ueditor.config.js"></script>
	<script type="text/javascript" src="/resources/ueditor.all.js"></script>

</head>
<body>
<div class="nav" th:include="pages/common/nav ::nav">
</div>


<div class="container-box">
	<div class="col-md-8 cont-left">

		<!--富文本部分-->
		<div class="editor">
			<div class="text-editor">
				<textarea name="后台取值的key" id="myEditor"></textarea>
			</div>
			<a href="javascript:void(0);" class="publish" id="publish-btn">发布</a>
		</div>


		<!--已关注人状态-->
		<div class="fri-news" id="fri-news">
			<ul id="myTab" class="nav nav-tabs">
				<li class="active">
					<a href="#home" data-toggle="tab">
						全部微博
					</a>
				</li>
				<li><a href="#attend" data-toggle="tab">我关注人的微博</a></li>
			</ul>
			<div id="myTabContent" class="tab-content">
				<div class="tab-pane fade in active" id="home">
					<div class="news-item" th:each="blog: ${blogPage.getContent()}">
						<div th:if="${blog.isHot()}" class="hot-blog">
							<span class="glyphicon glyphicon-fire"></span>
						</div>
						<div class="item-top">
							<div class="user-head">
								<a th:href="'/personalCenter/' + ${blog.getUser().getId()}">
									<img th:src="${blog.getUser().getImgUrl()}" class="head-img"/>
								</a>
							</div>
							<div class="item-info">
								<div class="user-name" th:text="${blog.getUser().getNickname()}"></div>
								<div class="create-time" th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd HH:mm')}"></div>
								<p class="text" ><p th:utext="${blog.getContext()}"></p></p>
								<!--图片??-->
							</div>
						</div>
						<div class="item-botm">
							<a href="javascript:void(0);" class="comment comment-list-btn">
								<span class="glyphicon glyphicon-pencil icon"></span>评论
							</a>
							<span class="cut"></span>
							<a href="javascript:void(0);" class="good"
								 th:attr="data-blogId=${blog.getId()},data-status=${blog.isPoint(session.user.id)}">
								<span class="glyphicon glyphicon-thumbs-up icon"></span> <span
									th:text="${blog.isPoint(session.user.id)}?'取消点赞':'点赞'"></span> <span
									th:text="${blog.getPoints()}"></span>
							</a>
						</div>
						<div class="comment-list">
							<span class="triangle"></span>

							<div class="comment-left">
								<a th:href="'/personalCenter/' + ${session.user.getId()}">
									<img th:src="${session.user.getImgUrl()}" class="head">
								</a>
							</div>
							<div class="comment-rit">
								<div class="add-comment">
									<textarea name="" class="text" th:attr="data-blogId=${blog.getId()}"></textarea>
									<a href="javascript:void(0);" class="comment-btn">评论</a>
								</div>
								<div class="comment-container">

									<div class="fri-comment" th:each="comment: ${blog.getComments()}">
										<a th:href="'/personalCenter/' + ${comment.getUser().getId()}">
											<img th:src="${comment.getUser().getImgUrl()}" class="head">
										</a>
										<div class="info-box">
                                <span class="text">
                                    <span class="fir-name" th:text="${comment.getUser().getNickname()}"></span>:&nbsp
                                    <span th:text="${comment.getContext()}"></span>
                                </span>
									<span class="create-time"
												th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm')}"></span>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>

					<ul class="pagination">
						<li th:unless="${blogPage.getNumber()} == 0"><a class="arrow"
								th:href="'/index?page1=' + ${blogPage.getNumber()}+'&page2='+ ${param.page2!=null?param.page2[0]:'1'}">&laquo;</a>
						</li>
						<li><a href="javascript:;">当前页面 第<span th:text="${blogPage.getNumber()+1}"></span>页</a></li>
						<li th:unless="${blogPage.getNumber()} == ${blogPage.getTotalPages() -1}"><a class="arrow"
								th:href="'/index?page1=' + ${blogPage.getNumber() + 2}+'&page2=' + ${param.page2!=null?param.page2[0]:'1'}">&raquo;</a>
						</li>
						<li><a href="javascript:;">共 <span th:text="${blogPage.getTotalPages()}"></span>页</a></li>
						<li class="goto">
							<a>
								<form action="/index" method="get">
									<span>跳转至</span>
									<input onkeyup="value=value.replace(/[^\d]/g,'')"  min="0" th:max="${blogPage.getTotalPages()}" type="number"  name="page1">
									<input class="hide" type="text" name="page2" th:value="${param.page2!=null?param.page2[0]:'1'}">
									<span>页</span>
									<button type="submit" class="btn btn-default">确认跳转</button>
								</form>
							</a>
						</li>
					</ul>
				</div>
				<div class="tab-pane fade" id="attend">
					<div class="news-item" th:each="blog: ${attendBlogPage.getContent()}">
						<div th:if="${blog.isHot()}" class="hot-blog">
							<span class="glyphicon glyphicon-fire"></span>
						</div>
						<div class="item-top">
							<div class="user-head">
								<a th:href="'/personalCenter/' + ${blog.getUser().getId()}">
									<img th:src="${blog.getUser().getImgUrl()}" class="head-img"/>
								</a>
							</div>
							<div class="item-info">
								<div class="user-name" th:text="${blog.getUser().getNickname()}"></div>
								<div class="create-time" th:text="${#dates.format(blog.getCreateTime(),'yyyy-MM-dd HH:mm')}"></div>
								<p class="text" ><p th:utext="${blog.getContext()}"></p></p>
								<!--图片??-->
							</div>
						</div>
						<div class="item-botm">
							<a href="javascript:void(0);" class="comment comment-list-btn">
								<span class="glyphicon glyphicon-pencil icon"></span>评论
							</a>
							<span class="cut"></span>
							<a href="javascript:void(0);" class="good"
								 th:attr="data-blogId=${blog.getId()},data-status=${blog.isPoint(session.user.id)}">
								<span class="glyphicon glyphicon-thumbs-up icon"></span> <span
									th:text="${blog.isPoint(session.user.id)}?'取消点赞':'点赞'"></span> <span
									th:text="${blog.getPoints()}"></span>
							</a>
						</div>
						<div class="comment-list">
							<span class="triangle"></span>

							<div class="comment-left">
								<a th:href="'/personalCenter/' + ${session.user.getId()}">
									<img th:src="${session.user.getImgUrl()}" class="head">
								</a>
							</div>
							<div class="comment-rit">
								<div class="add-comment">
									<textarea name="" class="text" th:attr="data-blogId=${blog.getId()}"></textarea>
									<a href="javascript:void(0);" class="comment-btn">评论</a>
								</div>
								<div class="comment-container">

									<div class="fri-comment" th:each="comment: ${blog.getComments()}">
										<a th:href="'/personalCenter/' + ${comment.getUser().getId()}">
											<img th:src="${comment.getUser().getImgUrl()}" class="head">
										</a>
										<div class="info-box">
                                <span class="text">
                                    <span class="fir-name" th:text="${comment.getUser().getNickname()}"></span>:&nbsp
                                    <span th:text="${comment.getContext()}"></span>
                                </span>
									<span class="create-time"
												th:text="${#dates.format(comment.getCreateTime(),'yyyy-MM-dd HH:mm')}"></span>
										</div>
									</div>

								</div>
							</div>
						</div>
					</div>

					<ul class="pagination">
						<li th:unless="${attendBlogPage.getNumber()} == 0">
							<a class="arrow" th:href="'/index?page2=' + ${attendBlogPage.getNumber()} +'&page1=' + ${param.page1!=null?param.page1[0]:'1'}">&laquo;</a>
						</li>
						<li><a href="javascript:;">当前页面 第<span th:text="${attendBlogPage.getNumber()+1}"></span>页</a></li>
						<li th:unless="${attendBlogPage.getNumber()} == ${attendBlogPage.getTotalPages() -1}">
							<a class="arrow" th:href="'/index?page2=' + ${attendBlogPage.getNumber() + 2}+'&page1=' + ${param.page1!=null?param.page1[0]:'1'}">&raquo;</a>
						</li>
						<li><a href="javascript:;">共 <span th:text="${attendBlogPage.getTotalPages()}"></span>页</a></li>
						<li class="goto">
							<a>
								<form action="/index" method="get" >
									<span>跳转至</span>
									<input onkeyup="value=value.replace(/[^\d]/g,'')"  min="0" th:max="${attendBlogPage.getTotalPages()}" type="number"  name="page2">
									<input class="hide" type="text" name="page1" th:value="${param.page1!=null?param.page1[0]:'1'}">
									<span>页</span>
									<button type="submit" class="btn btn-default">确认跳转</button>
								</form>
							</a>
						</li>
					</ul>
				</div>
			</div>

		</div>
	</div>
	<div class="col-md-4 cont-rit">
		<!--部分个人信息-->
		<div class="personal">
			<img src="/static/images/test/1.jpg" class="background-img">

			<div class="head-box">
				<img th:src="${session.user.getImgUrl()}" class="user-head">
			</div>
			<span class="user-name" th:text="${session.user.getNickname()}">火火</span>

			<div class="info">
				<div class="item">
					<a href="/personalCenter#follow">
						<span class="num" th:text="${session.user.getAttentionUsers().size()}">112</span>
						<span class="text">关注</span>
					</a>
				</div>
				<div class="item">
					<a href="/personalCenter#fans">
						<span class="num" th:text="${session.user.getFollowUsers().size()}">234</span>
						<span class="text">粉丝</span>
					</a>
				</div>
				<div class="item">
					<a href="/personalCenter#news">
						<span class="num" th:text="${session.user.getBlogs().size()}">96</span>
						<span class="text">微博</span>
					</a>
				</div>
			</div>
		</div>

		<!--公告栏-->
		<div class="notice" th:include="pages/common/notice :: notice">
		</div>

		<div class="game">
			<span class="game"></span>
			<object id="surprise" type="application/x-shockwave-flash" style="outline:none;" data="http://cdn.abowman.com/widgets/hamster/hamster.swf?" width="300" height="225"><param name="movie" value="http://cdn.abowman.com/widgets/hamster/hamster.swf?"></param><param name="AllowScriptAccess" value="always"></param><param name="wmode" value="opaque"></param></object>
		</div>
	</div>
</div>

<!--返回顶部-->
<a href="javascript:void(0);" id="to-top" class="to-top">
	<span class="glyphicon glyphicon-arrow-up top-icon"></span>
</a>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
		 th:include="pages/common/modal :: modal"></div>

<script type="text/javascript" th:inline="javascript">
	var session_user = new Object();
	session_user.nickname = /*[[${session.user.getNickname()}]]*/;
	session_user.imgUrl = /*[[${session.user.getImgUrl()}]]*/;
	session_user.imgUrl = /*[[${session.user.getImgUrl()}]]*/;
</script>
<script type="text/javascript">
	// 对Date的扩展，将 Date 转化为指定格式的String
	// 月(M)、日(d)、小时(h)、分(m)、秒(s)、季度(q) 可以用 1-2 个占位符，
	// 年(y)可以用 1-4 个占位符，毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
	// 例子：
	// (new Date()).Format("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
	// (new Date()).Format("yyyy-M-d h:m:s.S")      ==> 2006-7-2 8:9:4.18
	Date.prototype.Format = function (fmt) {
		var o = {
			"M+": this.getMonth() + 1, //月份
			"d+": this.getDate(), //日
			"H+": this.getHours(), //小时
			"m+": this.getMinutes(), //分
			"s+": this.getSeconds(), //秒
			"q+": Math.floor((this.getMonth() + 3) / 3), //季度
			"S": this.getMilliseconds() //毫秒
		};
		if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
		for (var k in o)
			if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
		return fmt;
	};
</script>

<script type="text/javascript">
	/*发布微博, 添加评论*/
	$(function () {
		var fri_news = $("div#fri-news"),
				news_item = fri_news.find("div.news-item");

		function init(e) {
			var $this = $(e),
					comment_list = $this.find("div.comment-list"),
					add_comment = comment_list.find("textarea.text"),
					comment_val = add_comment.val(),
					add_comment_btn = comment_list.find("a.comment-btn"),
					comment_container = $this.find("div.comment-container"),
					comment_list_btn = $this.find("a.comment-list-btn");

			/*添加评论框获得和失去焦点*/
			add_comment.bind({
				focus: function () {
					add_comment.addClass("onfocus");
				},
				blur: function () {
					add_comment.removeClass("onfocus");
				}
			});

			/*添加评论*/
			add_comment_btn.bind("click", function () {
				var new_comment = comment_list.find("textarea.text"),
						new_val = new_comment.val(),
						blogId = new_comment.attr('data-blogId');
				$.ajax({
					url: "/addComment",
					data: {
						"blogId": blogId,
						"context": new_val
					},
					contentType: "application/x-www-form-urlencoded; charset=utf-8",
					type: 'POST',
					success: function (data) {
						console.info(data);
						if (data.isSuccess) {
							good_btn.addClass("active");
							status = true;
							comment_container.append(get_comment(new_val));
							init(comment_container.children().get(0));
						}
						else {
							alert(data.reason);
						}
					}
				});
			});

			function get_comment(new_val) {
				return "<div class='fri-comment'>" +
						"<img src='" + session_user.imgUrl + "' class='head'>" +
						"<div class='info-box'><span class='text'><span class='fir-name'> " + session_user.nickname + "</span>: " + new_val + "</span>" +
						"<span class='create-time'> " + new Date().Format('yyyy-MM-dd HH:mm') + "</span></div>" +
						"</div>";
			}

			/*评论框所有评论隐藏显示*/
			if (comment_container.children('.fri-comment').length > 0) {
				comment_list.show();
			}
			else {
				comment_list.hide();
			}

			comment_list_btn.bind("click", function () {
				comment_list.toggle();
			});


			/*点赞功能*/
			var good_btn = $this.find("a.good");

			function pointClick() {

				var _this = $(this);
				var status = _this.attr("data-status");
				var blogId = _this.attr('data-blogId');
				_this.unbind("click");
				_this.bind("click", function () {
					alert('请稍等');
				});
				if (status == 'false') {
					$.ajax({
								url: "/pointBlog",
								data: {
									"blogId": blogId
								},
								type: 'POST',
								success: function (data) {
									_this.unbind("click");
									_this.bind('click', pointClick);
									console.info(data);
									if (data.isSuccess) {
										good_btn.addClass("active");
										status = true;
										_this.attr("data-status", true);
										_this.children().get(1).innerHTML = "取消点赞";
										var num = _this.children().get(2).innerHTML;
										_this.children().get(2).innerHTML = parseInt(num) + 1;

									}
									else {
										alert(data.reason);
									}
								}
							}
					);
				}
				else if (status == 'true') {
					$.ajax({
						url: "/unPointBlog",
						data: {
							"blogId": blogId
						},
						type: 'POST',
						success: function (data) {
							_this.unbind("click");
							_this.bind('click', pointClick);
							console.info(data);
							if (data.isSuccess) {
								good_btn.removeClass("active");
								status = false;
								_this.attr("data-status", false);
								_this.children().get(1).innerHTML = "点赞";
								var num = _this.children().get(2).innerHTML;
								_this.children().get(2).innerHTML = parseInt(num) - 1;
							}
							else {
								alert(data.reason);
							}
						}
					});
				}
			}

			good_btn.bind("click", pointClick);


		}

		news_item.each(function (i, e) {
			init(e); //针对循环出的当前一个对象e ??
		});


		/*富文本, 发布新状态*/
		/*富文本初始化*/
		var editor = new UE.ui.Editor();
		editor.render("myEditor");
		//1.2.4以后可以使用一下代码实例化编辑器
		//UE.getEditor('myEditor')

		var myeditor = $("textarea#myEditor"),
				publish_btn = $("a#publish-btn"),
				fri_news = $("div#fri-news");

		publish_btn.bind("click", function () {
			var content = UE.getEditor('myEditor').getContent();    //UEditor取得内容Html的方法

			function publish_info(info) {
				return "<div class='news-item'><div class='item-top'>" +
						"<div class='user-head'><img src='" + session_user.imgUrl + "' class='head-img'/></div>" +
						"<div class='item-info'><div class='user-name'>" + session_user.nickname + "</div>" +
						"<div class='create-time'> " + new Date().Format('yyyy-MM-dd HH:mm') + "</div>" +
						"<p class='text'>" + info + "</p></div></div>" +

						"<div class='item-botm'>" +
						"<a href='javascript:void(0);' class='comment comment-list-btn'>" +
						"<span class='glyphicon glyphicon-pencil icon'></span>评论</a><span class='cut'></span>" +
						"<a href='javascript:void(0);' class='good' data-status=false>" +
						"<span class='glyphicon glyphicon-thumbs-up icon'></span>点赞</a><span class='cut'></span>" +
						"<a href='javascript:void(0);' class='report'>" +

						"<div class='comment-list'><span class='triangle'></span>" +
						"<div class='comment-left'><img src='/static/images/test/head.jpg' class='head'></div>" +
						"<div class='comment-rit'><div class='add-comment'><textarea name='' class='text'></textarea>" +
						"<a href='javascript:void(0);' class='comment-btn'>评论</a></div>" +
						"<div class='comment-container'></div></div></div></div>";
			}

			//新发布的微博显示为第一个
			fri_news.prepend(publish_info(content));

			//页面已加载完,新发布的微博无法取到,所以需要重新循环,取得父元素的第一个子元素也就是新发布的微博.
			init(fri_news.children('div.news-item')[0]);


			$.ajax({
				url: "/publishBlog",
				data: {
					"context": content
				},
				type: 'POST',
				success: function (data) {
					// var result = $.parseJSON(data);
					if (data.isSuccess) {
						location.reload();
					}
					else{
						myAlert(data.reason);
					}
				}
			})

		});


	})
	;

	/*返回顶部*/
	$(function () {
		var to_top = $("a#to-top"),
				body = $("body,html"),
				body_scrolltop = body.scrollTop(),
				isTop = true;

		if (body_scrolltop > 0) {
			to_top.show();
		}
		else {
			to_top.hide();
		}

		to_top.bind("click", function () {
			body.animate({scrollTop: 0}, 200);
			to_top.hide(0, function () {

			});
		});

		$(window).scroll(function () {
			var body_scrolltop = body.scrollTop();

			if (body_scrolltop > 0 && isTop == true) {
				isTop = false;
				to_top.fadeIn(200);
			}
			else if (body_scrolltop <= 0) {
				isTop = true;
				to_top.fadeOut(200);
			}
		});
	});


</script>

</body>
</html>